<template>
    <div class="page-left">
      <div class="title">
        <span>人员警告信息</span>
      </div>
      <div class="row-1">
        <div class="box yb">
          <div class="ycontent">
            <span>234</span>
          </div>
        </div>
      </div>
      <div class="row-2">
        <div class="box yb">
          <div class="content">
            <ul>
              <li >
                <p >
                  特大 <span>2个</span>
                </p>
                <el-progress class="el-progress--without-text" :percentage="20" :format="format" :color="'#f56c6c'"></el-progress>
                <div  >1%</div>
              </li>
              <li >
                <p  >
                  重大 <span >4个</span>
                </p>
                <el-progress  class="el-progress--without-text" :percentage="20" :format="format" :color="'#e6a23c'"></el-progress>
                <div  >1%</div>
              </li>
              <li >
                <p >
                  较大 <span >6个</span>
                </p>
                <el-progress  class="el-progress--without-text" :percentage="20" :format="format" :color="'#5cb87a'"></el-progress>
                <div  >1%</div>
              </li>
              <li >
                <p  >
                  一般 <span >222个</span>
                </p>
                <el-progress class="el-progress--without-text"  :percentage="20" :format="format" :color="'#1989fa'"></el-progress>
                <div  >1%</div>
              </li>
            </ul>
            <div  class="result">
              <p >
                已处理: <span >180</span>个
              </p>
              <p >
                处理中: <span >45</span>个
              </p>
              <p >
                未处理: <span >9</span>个
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="title">
        <span>客流统计</span>
      </div>
      <div class="row-3">
        <div class="box yb">
          <div class="content" id="leftCharts">
              
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  mounted() {
    this.draw1();
  },
  methods: {
    format(percentage) {
        return "";
    },
    
    draw1() {
        let that = this;
        let myChart = this.$echarts.init(
            document.getElementById("leftCharts")
        );
      
        let option = {
          tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(0, 255, 233,0)'
                            }, {
                                offset: 0.5,
                                color: 'rgba(255, 255, 255,1)',
                            }, {
                                offset: 1,
                                color: 'rgba(0, 255, 233,0)'
                            }],
                            global: false
                        }
                    },
                },
            },
            grid: {
                top: '15%',
                left: '15%',
                right: '15%',
                bottom: '15%',
                // containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: false
                },
                splitArea: {
                    // show: true,
                    color: '#f00',
                    lineStyle: {
                        color: '#f00'
                    },
                },
                axisLabel: {
                    color: '#fff'
                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                data: ['8:00', '9:00', '10:00', '11:00'],

            }],

            yAxis: [{
                type: 'value',
                min: 0,
                // max: 140,
                splitNumber: 4,
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    }
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    margin: 20,
                    textStyle: {
                        color: '#d1e6eb',

                    },
                },
                axisTick: {
                    show: false,
                },
            }],
            series: [
                {
                    name: '',
                    type: 'line',
                    smooth: false, //是否平滑
                    showAllSymbol: true,
                    // symbol: 'image://./static/images/guang-circle.png',
                    symbol: 'circle',
                    symbolSize: 10,
                    lineStyle: {
                        normal: {
                            color: "#00b3f4",
                            shadowColor: 'rgba(0, 0, 0, .3)',
                            shadowBlur: 0,
                        
                        },
                    },
                    label: {
                        show: false,
                        position: 'top',
                        textStyle: {
                            color: '#00b3f4',
                        }
                    },
                    itemStyle: {
                        color: "#00b3f4",
                        borderColor: "#fff",
                        borderWidth: 1,
                        shadowColor: 'rgba(0, 0, 0, .3)',
                        shadowBlur: 0,
                        
                    },
                    tooltip: {
                        show: false
                    },
                    areaStyle: {
                        normal: {
                            color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0,179,244,0.3)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0,179,244,0)'
                                }
                            ], false),
                            shadowColor: 'rgba(0,179,244, 1)',
                            shadowBlur: 20
                        }
                    },
                    data: [10, 30, 60, 90 ]
                },
            ]
        };
        myChart.setOption(option);
        window.onresize = function () {
            myChart.resize();
        };
    },
  },
};
</script>
<style>
    .el-progress{
        height:20px;
        line-height: 0;
    }
</style>
<style lang="stylus" scoped>
    @import '../../../assets/css/varibles.styl';
    .page-left{
        position: fixed;
        top: 1.12rem;
        left: .3rem;
        width: 3.16rem;
        z-index: 2;
        .title{
            height: .18rem;
            font-size: .18rem;
            font-family: Microsoft YaHei;
            font-weight: 700;
            color: #55e1e0;
            line-height: .18rem;
            margin-bottom: .22rem;
            background: linear-gradient(0deg,#5398f6,#e2eeff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: rgba(0,0,0,0);
        }
        .row-1{
            .box{
                width: 100%;
                height: 100%;
                position: relative;
                z-index: 0;
                // background:url("");
                .ycontent{
                    height: .5rem;
                    text-align: center;
                    margin: .22rem 0 .18rem 0;
                    span{
                        position:absolute;
                        top:0;
                        left:40%;
                        font-size: .4rem;
                        font-family: NUMBER;
                        font-weight: 400;
                        color: #75c0ff;
                        line-height: .5rem;
                    }
                }
            }
        }
        .row-2{
            margin-bottom: .36rem;
            .box{
                width: 100%;
                height: 100%;
                position: relative;
                z-index: 0;
                // background:url("");
                .content{
                    height: 4.27rem;
                    padding: .23rem .25rem;
                    ul{
                        li{
                            p{
                                height: .18rem;
                                font-size: .18rem;
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                color: #ccc;
                                line-height: .18rem;
                                height: .17rem;
                                clear: both;
                                margin-bottom:.1rem;
                                span {
                                    color: #75c0ff;
                                    float: right;
                                }
                            }
                            div{
                                height: .12rem;
                                font-size: .16rem;
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                color: #eaad1c;
                                margin-top:.1rem;
                                line-height: .18rem;
                            }
                        }
                        li:not(:last-child){
                            margin-bottom: .36rem;
                        }
                    }
                    .result{
                        p{
                            width: 1.3rem;
                            height: .18rem;
                            font-size: .18rem;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #fff;
                            line-height: .18rem;
                            text-align: left;
                            margin: 0 auto .1rem;
                        }
                        
                    }
                }
            }
        }
        .row-3{
            margin-bottom: .36rem;
            .box{
                width: 100%;
                height: 100%;
                position: relative;
                z-index: 0;
                // background:url("");
                .content{
                    height: 2.5rem;
                }
            }
        }
    }
</style>